<script setup lang="ts">
import { PlusDialogForm } from "plus-pro-components";
import { useCtpSettingsPage } from "./ctp";

defineOptions({ name: "ctp-settings" });

const {
  // header
  searchQuery,
  openNew,
  openEdit,
  openCopy,
  isRowSelected,

  // table
  tableColumns,
  tableSize,
  filteredData,
  onCurrentChange,
  onRowClick,

  // dialog/form
  dialogVisible,
  dialogProps,
  dialogFormProps,
  dialogModel,
  handleConfirm,
  handleConfirmError,
  closeDialog
} = useCtpSettingsPage();
</script>

<template>
  <div class="">
    <div
      class="bg-bg_color mb-1 flex flex-col items-end gap-2 p-1 sm:mb-2 sm:p-2 md:flex-row md:items-center md:justify-between md:p-3"
    >
      <el-input
        v-model="searchQuery"
        placeholder="搜索配置名称"
        class="md:max-w-sm"
        clearable
      />
      <div class="flex gap-1 md:gap-2">
        <el-button :size="tableSize" type="primary" @click="openNew"
          >新建</el-button
        >
        <el-button
          :size="tableSize"
          type="success"
          :disabled="!isRowSelected"
          @click="openEdit"
          >编辑</el-button
        >
        <el-button
          :size="tableSize"
          type="warning"
          :disabled="!isRowSelected"
          @click="openCopy"
          >复制</el-button
        >
      </div>
    </div>
    <div class="bg-bg_color mt-1 p-1 sm:mt-2 sm:p-2 md:p-3">
      <pure-table
        :size="tableSize"
        :data="filteredData"
        :columns="tableColumns"
        row-key="name"
        :border="true"
        :highlight-current-row="true"
        @current-change="onCurrentChange"
        @row-click="onRowClick"
        @row-dblclick="
          row => {
            onCurrentChange(row);
            openEdit();
          }
        "
      />

      <PlusDialogForm
        v-model:visible="dialogVisible"
        v-model="dialogModel"
        :dialog="dialogProps"
        :form="dialogFormProps"
        @confirm="handleConfirm"
        @confirm-error="handleConfirmError"
        @close="closeDialog"
      />
    </div>
  </div>
</template>
